<template>
    <div class="week-date">
        <div class="week-date-item" :key="'week-date-item' + key" :class="{ 'self-date': item.dateStr == selfDate }"
            @click="handleClick(item)" v-for="item, key in week">
            <slot name="weekItem" :item="item">
                <div class="week-date-item-day">{{ weekCn[props.weekType][item.week] }}</div>
                <div class="week-date-item-date">{{ item.day }}日</div>
            </slot>
        </div>
</div>
</template>

<script setup lang="ts" name="saWeekCalendar">
import type { weekDateFnParam, weekI } from './lib/interfaces';
import weekDateFn from './lib/weekdate';
import formatDate from '../tool/formatDate';
import { ref, reactive, defineProps, defineEmits, watch } from 'vue';
let emits = defineEmits(['handleClickDate']);
let weekCn: any = reactive({
    'cn': {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        7: "星期天",
    },
    'en': {
        1: "Mon",
        2: "Tue",
        3: "Wed",
        4: "Thu",
        5: "Fri",
        6: "Sat",
        7: "Sun",
    }
})
let week = reactive<weekI[]>([]);
let selfDate = ref();
let props = defineProps({
    'date': {
        type: Date,
        default: () => new Date()
    },
    'data': {
        type: Array,
        default: () => []
    },
    'startWeek': {
        type: Number,
        default: () => 1,
    },
    'weekType': {
        type: String,
        default: () => 'cn'
    },
    'detailkey': {
        type: String,
        default: () => 'date'
    }
});
const handleClick = (item: object) => {
    emits('handleClickDate', item);
}
let initWeek = () => {
    selfDate.value = formatDate(new Date(props.date))
    week.length = 0;
    let param: weekDateFnParam = {
        date: props.date,
        startWeek: props.startWeek,
        data: props.data,
        detailkey: props.detailkey
    }
    week.push(...weekDateFn(param));
}
initWeek();
watch(props, () => {
    initWeek();
})
</script>
<style scoped>
.week-date {
    width: 100%;
    display: flex;


}

.week-date-item {
    flex: 1;
    text-align: center;
    padding: 4px 0px;
    cursor: pointer;


}

.self-date {
    background-color: #ebfff7;
}

.week-date-item-day {
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    color: #666;
}

.week-date-item-date {
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    color: #999999;
    font-weight: 600;
}
</style>